import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

import 'font-awesome/scss/font-awesome';
import './styles/reset';

// const screenWidth = window.screen.availWidth;
// const screenHeight = window.screen.availHeight;
const screenWidth = document.body.clientWidth;
const screenHeight = document.body.clientHeight;


const AppStyles = {
  height: screenHeight,
  width: '100%',
  position: 'absolute',
  top: 0,
  left: 0
}


export default class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <MuiThemeProvider>
        <div style={AppStyles}>
          <ReactCSSTransitionGroup
            transitionName="slide-in"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
          >
            <div key={location.pathname} style={AppStyles}>
            {this.props.children}
            </div>
          </ReactCSSTransitionGroup>
        </div>
      </MuiThemeProvider>
    )
  }
}